<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .flow {
            height: 120px;
            background: linear-gradient(to right, #6e18d0, #c592ff, rgb(0, 178, 255), rgba(0, 255, 247, 0.47), cyan, blue,  purple);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation:  hue 3s linear infinite;
            font-size: 10px;
            padding: 20px;
        }
        .change{
            height: 100px;
            width: 100px;
            background: linear-gradient(10deg, #6e18d0, #c592ff, rgb(0, 178, 255), rgba(50, 206, 201, 0.47), cyan, blue,  purple);
            animation:  hue 5s linear infinite;

        }
        @keyframes hue {
            0% {
                filter: hue-rotate(0deg);
            }
            100% {
                filter: hue-rotate(360deg);
            }
        }

    </style>
</head>
<body>
<div class="flow">hue-rotate通过滤镜来改变色相，超过360deg时就相当于绕一圈。加上动画就可以周期性的改变颜色来。

    background-clip：text背景被裁减为文字的前景色。

    -webkit-text-fill-color：transparent：指定文本字符的填充颜色为透明。
</div>
<div class="change"></div>
</body>
</html>